<template>
	<view>
		<TopNav title="设备数据"></TopNav>
		<view class="card">
			<view>
				<view style="padding: 10px;">
					<text class="title">{{nowTitle}}实时数据</text>
				</view>
				<qiun-data-charts ref="realChat" type="line" :opts="realOpts" :chartData="realData" :ontouch="true" :canvas2d="canvas2d" 
				canvasId="JweGyOILnXRyqFODymxjyEXdqakoXcin1" />
			</view>
		</view>

		<view class="card">
			<view>
				<view style="padding: 10px;">
					<text class="title">近三日数据对比</text>
				</view>
				<qiun-data-charts type="line" :opts="realOpts" :chartData="comparisonData" :ontouch="true" :canvas2d="canvas2d" canvasId="JweGyOILnXRyqFODymxjyEXdqakoXcin2" />
			</view>
		</view>
		
		

		<view class="card">
			<view>
				<view style="padding: 10px;" class="flex align-center justify-between">
					<text class="title">监测记录</text>
					<view class="flex-1"></view>
					<view @click="handleDatePicker">
						<u--input v-model="date" readonly style="width: 100px;" placeholder="后置图标" suffixIcon="calendar"
							suffixIconStyle="color: #909399"></u--input>
					</view>
					
				</view>

				<view>
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="100" align="center">时间</uni-th>
							<uni-th width="100" align="center">数据</uni-th>
							<uni-th width="100" align="center">状态</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableList" :key="index">
							<uni-td>{{item.createTime}}</uni-td>
							<uni-td>{{item.value}}</uni-td>
							<uni-td>正常</uni-td>
						</uni-tr>
					</uni-table>
					<view class="uni-pagination-box" style="margin-top: 10upx;"><uni-pagination show-icon :page-size="queryParams.pageSize" v-model="queryParams.page" :total="total" @change="getDataTable" /></view>
				</view>
			</view>
		</view>
		<u-datetime-picker
					ref="datetimePicker"
		               :show="show"
		               v-model="date"
						@confirm="confirm"
						@close="handleClose"
						@cancel="handleClose"
		               mode="date"
		       ></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		getPondDeviceDataChat,
		getPondDeviceDataTable,
		getPondDeviceDataDailyChat
	} from '@/api/mine/equipment/deviceData'
	export default {
		data() {
			return {
				canvas2d:true,
				queryParams:{
					deviceId:undefined,
					pondId:undefined,
					startTime:undefined,
					endTime:undefined,
					page:1,
					pageSize:20,
				},
				total:0,
				show: false,
				realOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true,
					dataPointShape: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 5,
						scrollAlign:'right'
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				//日期
				date: dayjs().format('YYYY-MM-DD'),
				dateStr:dayjs().format('YYYY-MM-DD'),
				nowTitle:dayjs().format('M月D日'),
				//表格数据
				tableList: [],
				//实时数据
				realData: {
					categories: [],
					series: []
				},
				//对比数据
				comparisonData: {
					categories: [],
					series: []
				}
			}
		},
		onLoad(query) {
			this.queryParams.deviceId=query.deviceId
			this.queryParams.pondId = query.pondId
			this.getRealData()
			this.getDataTable()
			this.getDataComparison()
		},
		methods: {
			handleDatePicker(){
				this.canvas2d = false
				this.show=true
				
			},
			handleClose(){
				this.canvas2d = true
				this.show=false
			},
			confirm(e) {
				this.canvas2d = true
				this.show=false
				this.dateStr = uni.$u.timeFormat(e.value,'yyyy-mm-dd')
				this.getDataComparison()
				this.getDataTable()
				this.getRealData()
			},
			//获取设备详情
			getDeviceInfo() {

			},
			//获取实时数据
			getRealData() {
				this.queryParams.startTime = dayjs().format('YYYY-MM-DD')+" 00:00:00"
				this.queryParams.endTime = dayjs().format('YYYY-MM-DD')+" 23:59:59"
				
				getPondDeviceDataChat(this.queryParams).then(res=>{
					this.realData.categories = res.data.categories
					this.realData.series = res.data.series
				})
			},
			//获取数据对比
			getDataComparison() {
				getPondDeviceDataDailyChat(this.queryParams).then(res=>{
					this.comparisonData.categories = res.data.categories
					this.comparisonData.series = res.data.series
				})
			},
			//获取数据表格
			getDataTable() {
				this.queryParams.startTime = this.dateStr+" 00:00:00"
				this.queryParams.endTime = this.dateStr+" 23:59:59"
				getPondDeviceDataTable(this.queryParams).then(res=>{
					this.tableList = res.rows
					this.total = parseInt(res.total)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		margin: 20upx;
		padding: 20upx;
		background-color: white;
		border-radius: 10upx;

		.title {
			margin: 10upx;
			font-weight: bold;
			font-size: 28upx;
		}
	}
</style>